<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PVheBQ3Uq9NAdiF3NZaxSAEjtMSsRpTg"></script>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="map" style="height: 100%"></div>
</body>
<!-- <script type="text/javascript">
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
</script> -->
<script type="text/javascript">
	var zht_list = null, station_list = null;
	var infos = [];//信息框内容
	var titles = [];//label
	var markers = [];//marker
    map = new BMap.Map("map",{mapType:BMAP_HYBRID_MAP});
    //深圳
    map.centerAndZoom(new BMap.Point(114.00152138982, 22.624946174618), 17);
  	//绵阳
    //map.centerAndZoom(new BMap.Point(104.456, 31.821), 10);

    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));
    map.enableScrollWheelZoom(true);

    function getBoundary(){
        var bdary = new BMap.Boundary();
        bdary.get("深圳", function(rs){       //获取行政区域
            //map.clearOverlays();        //清除地图覆盖物
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {fillOpacity: 0, strokeWeight: 2,
                    strokeColor: "#ff0000"});
                ply.setFillColor();
                //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            map.setViewport(pointArray);    //调整视野
        });
    }
    
    var opts = {
			width : 280,     // 信息窗口宽度
			//height: 280,     // 信息窗口高度
			//title : "信息窗口" , // 信息窗口标题
			enableMessage:true//设置允许信息窗发送短息
		   };
    function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e);
			}
		);
	}
    
    function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}

    //坐标转换完之后的回调函数
    translateCallback = function (data){
    	console.log(data);
        if(data.status === 0) {
        	//getBoundary();
        	console.log(infos);
        	
        	for(var i = 0; i < data.points.length; i++) {
	            var marker = new BMap.Marker(data.points[i]);
	            var label = new BMap.Label(titles[i],{offset:new BMap.Size(20,-10)});
	            marker.setLabel(label);
	            console.log(data.points[i]);
	            map.addOverlay(marker);
	            markers.push(marker);
	            //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	            var content = infos[i];
	            addClickHandler(content,marker);
        	}
        	
        	warning();//打开页面进行第一次检查预警
        	setInterval(warning, 180000);//每三分钟检查一次是否有预警信息
        }
    }

    //获取灾害体和设备数据
    $.ajax({
		  url: '../../tbl_zht/all',
		  type : 'get',
		  async : false,
		  contentType: "application/json; charset=utf-8",
		  dataType: "json",
		  success: function(json) {
			  zht_list = json.zhtList;
			  station_list = json.stationList;
			  initZht();
			  console.log(zht_list);
			  initInfors();
			  console.log();
			  
		  }
	});
    
    function initZht() {
    	var convertor = new BMap.Convertor();
    	var pointArr = [];
    	for (var i = 0; i < zht_list.length; i ++) {
    		var point = new BMap.Point(zht_list[i].location_lng, zht_list[i].location_lat);
    		pointArr.push(point);
    	}
    	console.log(pointArr);
    	convertor.translate(pointArr, 1, 5, translateCallback);
    }
    
    function loadPage( _url ){
    	//iframe里获取global
    	//window.parent.global.search_station_type
    	$(window.parent.document).find("#middle_frame").load(_url);
    }
    
    function initInfors() {
        for (var i = 0; i < zht_list.length; i ++) {
    		var zht = zht_list[i];
    		var stationContent = '';
    		for(var j = 0; j < station_list[i].length; j ++) {
    			var station = station_list[i][j];
    			stationContent +=
                    "<input type='button' style='font-size:10px;' value=" + station.station_name + " onclick=\"loadPage" +
                    "('../../tbl_station_info/mapStation/"+station.id+"')\"/>";
    		}
    		var sContent =
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + zht.name + "</h4>" +
                "<p style='margin:0;line-height:1.5;font-size:15px;'>监测站点数量：" + station_list[i].length + "</p>" +
                        stationContent +
                "<p style='margin:0;line-height:1.5;font-size:15px;'>经度：" + zht.location_lng + "</p>" +
                "<p style='margin:0;line-height:1.5;font-size:15px;'>纬度：" + zht.location_lat + "</p>" +
                "</div>";
            
            infos.push(sContent);
            titles.push(zht.name);
    	}
    }
    
    function warning(){
    	console.log('warning...');
    	for (var i = 0; i < zht_list.length; i ++) {
    		var zht = zht_list[i];
    		//根据灾害体ID查询是否有预警信息
    		var param = {};
        	param.page = 1;
        	param.pageSize = 3;
        	param.zht_id = zht.id;
        	param.is_warning = 0;
    		var json_data = JSON.stringify( param );
        	$.ajax({
      		  url: '../../tbl_warning_info/list',
      		  type : 'post',
      		  async : false,
      		  /* data : {
      			  page : 0,
      			  pageSize : 3
      		  }, */
      		  data :　json_data,
      		  contentType: "application/json; charset=utf-8",
      		  dataType: "json",
      		  success: function(json) {
      			console.log(json);
      			if (json.data.length > 0) {
      				markers[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
      				playSound();//播放声音
      			} else {
      				markers[i].setAnimation(null); //取消跳动的动画
      			}
      		  }
      		});
    	}
    }
    
    function playSound() {
      var borswer = window.navigator.userAgent.toLowerCase();
      if ( borswer.indexOf( "ie" ) >= 0 ) {
        //IE内核浏览器
        var strEmbed = '<embed name="embedPlay" src="http://www.gongqinglin.com/accessory/ding.wav" autostart="true" hidden="true" loop="false"></embed>';
        if ( $( "body" ).find( "embed" ).length <= 0 )
          $( "body" ).append( strEmbed );
        var embed = document.embedPlay;

        //浏览器不支持 audion，则使用 embed 播放
        embed.volume = 100;
        //embed.play();这个不需要
      } else {
        //非IE内核浏览器
        var strAudio = "<audio id='audioPlay' src='http://www.gongqinglin.com/accessory/ding.wav' hidden='true'>";
        if ( $( "body" ).find( "audio" ).length <= 0 )
          $( "body" ).append( strAudio );
        var audio = document.getElementById( "audioPlay" );

        //浏览器支持 audion
        audio.play();
      }
    }

</script>
</html>

